<template>
  <div id="CompanyIntroduction">
    <!-- <div class="banner container-fuild text-center">专利权评估报告</div> -->
    <div class="container">
      <div class="row">
        <!-- <div class="col-xs-6 col-sm-6 col-md-3 wow zoomIn">
          <img
            class="img-responsive center-block"
            src="@/assets/img/about_img.png"
          />
        </div> -->
        <div style="height: 20px"></div>
        <div class="col-xs-24 col-sm-24 col-md-12">
          <van-card>
            <template #tags>
              <div class="center warp">
                <span class="center l_box">
                  <span style="width: 50%">专利行业:</span>
                  <van-button type="info" size="mini" class="ml"
                    >全部</van-button
                  >
                </span>
                <div class="r_box">
                  <span class="ml cus hui" v-for="i in 10" :key="i"
                    >作业运输</span
                  >
                </div>
              </div>
              <div class="center warp mt2">
                <span class="center l_box">
                  <span style="width: 50%">专利类型:</span>
                  <van-button type="info" size="mini" class="ml"
                    >全部</van-button
                  >
                </span>
                <div class="r_box">
                  <span class="ml cus hui" v-for="i in 10" :key="i"
                    >发明专利</span
                  >
                </div>
              </div>
              <div class="center warp mt2">
                <span class="center l_box">
                  <span style="width: 50%">交易类型:</span>
                  <van-button type="info" size="mini" class="ml"
                    >全部</van-button
                  >
                </span>
                <div class="r_box">
                  <span class="ml cus hui" v-for="i in 10" :key="i">转让</span>
                </div>
              </div>
              <div class="center warp mt2">
                <span class="center l_box">
                  <span style="width: 50%">交易方式:</span>
                  <van-button type="info" size="mini" class="ml"
                    >全部</van-button
                  >
                </span>
                <div class="r_box">
                  <span class="ml cus hui" v-for="i in 10" :key="i">议价</span>
                </div>
              </div>

              <div class="center warp mt2">
                <span class="center l_box">
                  <span style="width: 50%">交易价格:</span>
                  <van-button type="info" size="mini" class="ml"
                    >全部</van-button
                  >
                </span>
                <div class="r_box">
                  <span class="ml cus hui" v-for="i in 5" :key="i"
                    >一万以下</span
                  >
                  <span class="ml"
                    >自定义 <input placeholder="¥" class="zdy" />一<input
                      placeholder="¥"
                      class="zdy"
                    />
                    <van-tag type="warning" class="cus">确定</van-tag>
                  </span>
                </div>
              </div>
            </template>
          </van-card>
          <div style="height: 20px"></div>
          <van-card>
            <template #tags>
              <div>
                <span>
                  综合排序<span class="glyphicon glyphicon-sort"></span>
                </span>
                <span class="ml">
                  价格<span class="glyphicon glyphicon-sort"></span>
                </span>
                <span class="ml">
                  时间<span class="glyphicon glyphicon-sort"></span>
                </span>
                <span class="ml">
                  热度<span class="glyphicon glyphicon-sort"></span>
                </span>
              </div>
              <van-divider />
              <div class="warp row_bw">
                <van-card
                  v-for="i in 5"
                  :key="i"
                  style="width: 24%; background-color: white;"
                  num="1"
                  price="2.00"
                  desc="描述信息"
                  title="商品标题"
                  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                />
              </div>
            </template>
          </van-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "Trade",
  data() {
    return {
      key_w: "",
    };
  },
  mounted() {
    var wow = new WOW();
    wow.init();
  },
  methods: {
    go_xq() {
      this.$router.push("/expertxq");
    },
    onClear() {
      console.log("23");
      this.key_w = "";
    },
    onSearch2(e) {
      console.log("e:", e, this.key_w);
    },
    onSearch(e) {
      console.log(e);
    },
  },
};
</script>
<style scoped>
.zdy {
  width: 100px;
}
.box {
  width: 30vw;
}
.l_img {
  width: 150px;
  height: 150px;
}
.under_box {
  /* width: 18%; */
}

.list_card {
  padding: 5px;
}
.list_card_top {
  background-color: #4f4f4f;
  color: white;
  padding: 10px;
}

.l_box {
  width: 15%;
}
.r_box {
  width: 80%;
}
.center {
  display: flex;
  align-items: center;
}
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../assets/img/banner1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.row {
  margin-right: 0;
  margin-left: 0;
}
.CompanyIntroduction-container {
  padding: 100px 0;
  color: #808080;
  transition: all ease 0.5s;
}
.CompanyIntroduction-container > div > p {
  font-size: 14px;
  line-height: 2.5rem;
}
@media screen and (max-width: 997px) {
  .CompanyIntroduction-container {
    padding: 10px 0;
    color: #808080;
  }
}
</style>

